/*
 * @Author: kakay
 * @Date: 2017-08-17 14:49:18
 * */

import React, { Component } from 'react';
import { NavBar, Flex, List } from 'antd-mobile';
import { Resource } from '../../../service/resource';
import BrowserUtils from '../../../service/history';
import './index.scss'

const Item = List.Item;
export default class WorkLoad extends Component {
  constructor(props) {
    super(props);
    const info = props.location.state && props.location.state.info;
    this.state = {
      workLoadList : [],
      info:info||{}
    }
  }

  componentDidMount() {
   this.getAllUserList();
  }
  
  componentWillReceiveProps(nextProps) {
    if(nextProps.location.state&&nextProps.location.state.info){
        this.setState({info:nextProps.location.state.info})
    }
    this.getAllUserList();
  }

  getAllUserList(){
    const {info} = this.state;
    info.id && Resource.getProjecAllUser.get({id:info.id}).then(res => {
      this.setState({workLoadList:res})
    })
  }

  onTouchTapBack() {
    BrowserUtils.goBack();
  }

  render() {
    const {workLoadList} = this.state;
    return (
      <div className="workload" style={{display: this.props.display}}>
        <NavBar
          mode="dark"
          className="am-tab-bar-bar"
          style={{top: 0}}
          onLeftClick={() => this.onTouchTapBack()}
          >
          月统计
        </NavBar>
      <List className="my-list">
        <Item>
          <Flex justify="between">
            <Flex.Item className="label">员工</Flex.Item>
            <Flex.Item className="label">工时</Flex.Item>
          </Flex>
        </Item>
        {workLoadList.map((item, index) =>
          <Item style={{background: index % 2 === 0 ? "#fff" : "#eee" }} onLongPress={this.handleLongPress} className={item.valid === 0 ? 'valid' : ''} key={index} onTouchTap={() => this.editProjectInfo(item)}>
            <Flex justify="between">
              <Flex.Item className="label name">{item.nickName}</Flex.Item>
              <Flex.Item className="label">{item.workingHour}</Flex.Item>
            </Flex>
          </Item>
        )}
      </List>
    </div>
      
    );
  }
}

